<template>
  <view>
    <map 
      id="orderMap"
      style="width: 100%; height: 100vh;" 
      :latitude="latitude"
      :longitude="longitude"
      :markers="markers"
      :scale="scale"
      @markertap="onMarkerTap"
    ></map>
  </view>
</template>
<script>
export default {
  data() {
    return {
      latitude: 31.322542, // 上海市嘉定区水达水站纬度
      longitude: 121.265584, // 上海市嘉定区水达水站经度
      scale: 15, // 缩放级别
      markers: [], // 标记点数组
      
      // 静态订单数据 - 上海市嘉定区水达水站周围3公里内
      orders: [
        {
          id: 1,
          orderNo: 'ORD20230001',
          address: '上海市嘉定区曹安公路4800号',
          latitude: 31.3225,
          longitude: 121.2678,
          status: 'pending',
          product: '手机充电宝'
        },
        {
          id: 2,
          orderNo: 'ORD20230002',
          address: '上海市嘉定区曹安公路4688号',
          latitude: 31.3241,
          longitude: 121.2632,
          status: 'completed',
          product: '笔记本电脑充电宝'
        },
        {
          id: 3,
          orderNo: 'ORD20230003',
          address: '上海市嘉定区曹安公路4580号',
          latitude: 31.3207,
          longitude: 121.2605,
          status: 'pending',
          product: '多功能充电宝'
        },
        {
          id: 4,
          orderNo: 'ORD20230004',
          address: '上海市嘉定区曹安公路4455号',
          latitude: 31.3189,
          longitude: 121.2578,
          status: 'completed',
          product: '快充充电宝'
        },
        {
          id: 5,
          orderNo: 'ORD20230005',
          address: '上海市嘉定区曹安公路4321号',
          latitude: 31.3162,
          longitude: 121.2551,
          status: 'pending',
          product: '太阳能充电宝'
        },
        {
          id: 6,
          orderNo: 'ORD20230006',
          address: '上海市嘉定区曹安公路4200号',
          latitude: 31.3138,
          longitude: 121.2524,
          status: 'completed',
          product: '无线充电宝'
        },
        {
          id: 7,
          orderNo: 'ORD20230007',
          address: '上海市嘉定区曹安公路4102号',
          latitude: 31.3115,
          longitude: 121.2497,
          status: 'pending',
          product: '大容量充电宝'
        },
        {
          id: 8,
          orderNo: 'ORD20230008',
          address: '上海市嘉定区曹安公路4001号',
          latitude: 31.3092,
          longitude: 121.2470,
          status: 'completed',
          product: '迷你充电宝'
        },
        {
          id: 9,
          orderNo: 'ORD20230009',
          address: '上海市嘉定区曹安公路3905号',
          latitude: 31.3069,
          longitude: 121.2443,
          status: 'pending',
          product: '三合一充电宝'
        },
        {
          id: 10,
          orderNo: 'ORD20230010',
          address: '上海市嘉定区曹安公路3800号',
          latitude: 31.3046,
          longitude: 121.2416,
          status: 'completed',
          product: '车载充电宝'
        }
      ]
    }
  },
  onLoad() {
    this.initMapData()
  },
  methods: {
    initMapData() {
      // 转换订单数据为地图标记点
      this.markers = this.orders.map((order, index) => {
        return {
          id: order.id,
          latitude: order.latitude,
          longitude: order.longitude,
          title: order.address,
          iconPath: order.status === 'completed' ? '/static/image/completed.png' : '/static/image/pending.png',
          width: 30,
          height: 30,
          callout: {
            content: `${order.address}\n订单号:${order.orderNo}\n产品:${order.product}`,
            color: '#333',
            fontSize: 14,
            borderRadius: 5,
            bgColor: '#fff',
            padding: 10,
            display: 'ALWAYS'
          }
        }
      })
      
      // 将地图中心点设置为水达水站位置
      this.latitude = 31.322542
      this.longitude = 121.265584
    },
    
    onMarkerTap(e) {
      const markerId = e.markerId
      console.log('点击了标记点:', markerId)
      uni.showToast({
        title: `点击了订单 ${markerId}`,
        icon: 'none'
      })
    }
  }
}
</script>

<style>

</style>
